<template>
    <div>
        <!-- 轮播图 -->
            <swiper-box :lunbotuList="lunbotuList" :isfull="true">

            </swiper-box>

        <!-- 九宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                    <p>
                        <span class="mui-icon mui-icon-location-filled"></span>
                    </p>
                    
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
                   <p>
                        <span class="mui-icon icon iconfont icon-dian"></span>
                    </p>
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
                    <p>
                        <span class="mui-icon icon iconfont icon-icon1"></span>
                    </p>
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <p>
                        <span class="mui-icon icon iconfont icon-shouqian"></span>
                    </p>
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <p>
                        <span class="mui-icon icon iconfont icon-shipin"></span>
                    </p>
                    <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <p>
                        <span class="mui-icon icon iconfont icon-lianxiwomen"></span>
                    </p>
                    <div class="mui-media-body">联系我们</div></a></li>
        </ul> 
    </div>
</template>
<script>
import Vue from "vue";


import { Toast } from "mint-ui";

import swiper from "../subcomponents/swiper.vue"
export default {
    data(){
        return {
            lunbotuList:[]//保存轮播图的数组
        }
    },
    created(){
        this.getLunbotu()
    },
    methods:{
        getLunbotu(){
            // 获取轮播图数据的方法
            this.$http.get('http://h5.pre.meiktv.com/feed/list?page=2').then(res=>{
                console.log(res)
                var that = this;
                if(res.body.code == 200){
                    var list = res.body.data.list;
                    list.forEach(function (item,i) {
                        if(i<3){
                            that.lunbotuList.push(item)
                        }
                        
                    })
                    // this.lunbotuList = res.body.data.list
                    // Toast('获取Ok')
                }else{
                    Toast('获取失败')
                }
                
            })
        }
    },
    components:{
        'swiper-box':swiper
    }
}
</script>
<style lang="scss" scoped>

.mui-icon{
    line-height: 60px
}
.mui-grid-view.mui-grid-9{
    background: #fff;
    border:none;
    margin-top: 10px;
    
    .mui-table-view-cell{
        border:none;
        .mui-media-body{
            font-size:12px
        }
        p{
            width:60px;
            height: 60px;
            border-radius: 50%; 
            text-align: center;
            line-height:60px;
            color:#fff;
            display: inline-block;           
        }
        &:nth-child(1){
                p{
                    background: rgb(31, 213, 154)
                }
                
            }
            &:nth-child(2){
                p{
                    background: rgb(253, 60, 79)
                }
                
            }
            &:nth-child(3){
                p{
                    background: rgb(63, 128, 253)
                }
                
            }
            &:nth-child(4){
                p{
                    background: rgb(43, 194, 247)
                }
                
            }
            &:nth-child(5){
                p{
                    background: rgb(253, 63, 0)
                }
                
            }
            &:nth-child(6){
                p{
                    background: rgb(255, 119, 43)
                }
               
            }
    }
}
</style>